<template>
  <Wrap @changeRadio="changeRadio">
    <view class="login-box">
      <view class="login-list">
        <button
          openType="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          class="btn btn-primary login-primary"
        >
          <text class="login-primary__text">本机号码一键登录</text>
        </button>
      </view>

      <view class="login-list">
        <button @click="otherLogin" class="btn btn-primary-white">
          <text class="login-default__text">使用其他方式登录</text>
        </button>
      </view>
	  <view class="login-list login-list-last">
	    <button @click="backIndex" class="btn ">
	      <text class="login-default__text">跳过登录</text>
	    </button>
	  </view>
    </view>
    <message ref="message"></message>
	<!-- #ifdef MP-WEIXIN -->
		<wxPrivacy id="privacy-popup"></wxPrivacy>
	<!-- #endif -->
  </Wrap>
 
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import Wrap from "./components/wrap";
import wxPrivacy from "@/components/ws-wx-privacy/ws-wx-privacy.vue"
import { mapState, mapMutations, mapActions } from "vuex";
import { getCode } from "@/common/js/base";
import { ERR_OK } from "@/common/config/index";
import { MiniPhoneLogin } from "@/common/api/login";
export default {
  mixins: [viewModule],
  components: {
    Wrap,
	wxPrivacy
  },
  data() {
	return {
	  isCheck: false
	}
  },
  timer: null,
  onShow() {
    this.resetCode();
    this.timer = setInterval(() => this.resetCode(), 280 * 1000);
  },
  onHide() {
    clearInterval(this.timer);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  computed: {
    ...mapState(["code"]),
  },
  methods: {
    ...mapActions("User", [
      "login",
      "phoneLogin",
      "getUserInfo",
      "getLoginSession",
    ]),
    ...mapMutations(["setCode"]),
    ...mapMutations("User", ["setToken"]),
    otherLogin() {
      this.$Router.push("/pages/login/other");
    },
    resetCode() {
      getCode().then((code) => {
        this.setCode(code);
      });
    },
	backIndex() {
		uni.reLaunch({
		  url: "/pages/tabbar-pages/tabbar-pages?pages=1",
		});
	},
	changeRadio(e) {
	  console.log(e,'E???')
	  this.isCheck = e
	},
    getPhoneNumber(e) {
	  console.log(this.isCheck,'this.isCheck????')
	  if(this.isCheck) {
      console.log(e)
		if (!e.detail.iv) return;
		uni.showLoading({
		  title: "登录中",
		});
		MiniPhoneLogin({
		  ...e.detail,
		  code: this.code,
		  mini_code: this.code,
		})
		  .then(async (res) => {
		    console.log(res, "???res.data.token");
		    getCode();
		    if (res.code !== ERR_OK) {
		      uni.hideLoading();
		      return this.message.error(res.message || "");
		    }
		    this.setToken({
		      token: res.data.token,
		    });
		    await this.getUserInfo();
		    uni.reLaunch({
		      url: "/pages/tabbar-pages/tabbar-pages",
		    });
		  })
		  .catch((err) => {
		    uni.hideLoading();
		  });  
	  } else {
		uni.showToast({
		   title: "请先阅读和勾选用户协议",
		   icon: 'none'
		}); 
	  }
      
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '@/common/stylus/variable';

.login {
  &-box {
    position: relative;
  }

  &-list {
    padding: 0 62rpx;
    margin-bottom: 20rpx;

    &-last {
      margin-bottom: 0;
    }
  }

  &-default {
    background-color: #fff;
    border: 2rpx solid color-active;

    &__text {
      color: color-active;
      justify-content: center;
    }
  }

  &-primary {
    background-color: color-active;

    &__text {
      flex: 1;
      color: #fff;
      text-align: center;
      justify-content: center;
    }
  }
}
</style>